@mixin placeholder($color: $input-placeholder-color) {
  // Firefox
  &::-moz-placeholder {
    color: $color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  // Internet Explorer 10+
  &:-ms-input-placeholder {
    color: $color;
  }
  // Safari and Chrome
  &::-webkit-input-placeholder {
    color: $color;
  }
}

// for select and input like component's arrow
@mixin inner-arrow() {
  color: $subsidiary-color;
  font-size: $font-size-base;
  line-height: 1;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: all $transition-time $ease-in-out;
}

@mixin reset-component() {
  box-sizing: border-box;
  color: $text-color;
  font-family: $font-family;
  font-size: $font-size-base;
  line-height: $line-height-base;
  list-style: none;
  margin: 0;
  padding: 0;
}
